<!DOCTYPE html>
<html lang="en-US">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1">
    <title>CSS 第 06 天 —— 定位 | 前端基础班学习笔记</title>
    <meta name="generator" content="VuePress 1.7.1">
    
    <meta name="description" content="前端基础班笔记">
    <meta name="theme-color" content="#3eaf7c">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    
    <link rel="preload" href="/basenode/assets/css/0.styles.2182318c.css" as="style"><link rel="preload" href="/basenode/assets/js/app.52c57e5d.js" as="script"><link rel="preload" href="/basenode/assets/js/2.fd1002bd.js" as="script"><link rel="preload" href="/basenode/assets/js/3.924754cc.js" as="script"><link rel="prefetch" href="/basenode/assets/js/10.0fd16134.js"><link rel="prefetch" href="/basenode/assets/js/11.69b32ff0.js"><link rel="prefetch" href="/basenode/assets/js/12.8306a2fe.js"><link rel="prefetch" href="/basenode/assets/js/13.bd409108.js"><link rel="prefetch" href="/basenode/assets/js/14.397fbca0.js"><link rel="prefetch" href="/basenode/assets/js/15.3ebf464d.js"><link rel="prefetch" href="/basenode/assets/js/16.18b0f270.js"><link rel="prefetch" href="/basenode/assets/js/17.aca32580.js"><link rel="prefetch" href="/basenode/assets/js/18.b36abbab.js"><link rel="prefetch" href="/basenode/assets/js/19.40fd0225.js"><link rel="prefetch" href="/basenode/assets/js/20.9c6d2a17.js"><link rel="prefetch" href="/basenode/assets/js/21.6d37b375.js"><link rel="prefetch" href="/basenode/assets/js/22.c01d802c.js"><link rel="prefetch" href="/basenode/assets/js/23.d7de44fa.js"><link rel="prefetch" href="/basenode/assets/js/24.3470c223.js"><link rel="prefetch" href="/basenode/assets/js/4.4eeb3907.js"><link rel="prefetch" href="/basenode/assets/js/5.88e4a4fd.js"><link rel="prefetch" href="/basenode/assets/js/6.ae7868e8.js"><link rel="prefetch" href="/basenode/assets/js/7.6ab91996.js"><link rel="prefetch" href="/basenode/assets/js/8.750a9450.js"><link rel="prefetch" href="/basenode/assets/js/9.26864b79.js">
    <link rel="stylesheet" href="/basenode/assets/css/0.styles.2182318c.css">
  </head>
  <body>
    <div id="app" data-server-rendered="true"><div class="theme-container"><header class="navbar"><div class="sidebar-button"><svg xmlns="http://www.w3.org/2000/svg" aria-hidden="true" role="img" viewBox="0 0 448 512" class="icon"><path fill="currentColor" d="M436 124H12c-6.627 0-12-5.373-12-12V80c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12zm0 160H12c-6.627 0-12-5.373-12-12v-32c0-6.627 5.373-12 12-12h424c6.627 0 12 5.373 12 12v32c0 6.627-5.373 12-12 12z"></path></svg></div> <a href="/basenode/" class="home-link router-link-active"><!----> <span class="site-name">前端基础班学习笔记</span></a> <div class="links"><div class="search-box"><input aria-label="Search" autocomplete="off" spellcheck="false" value=""> <!----></div> <nav class="nav-links can-hide"><div class="nav-item"><a href="/basenode/html/" class="nav-link">
  HTML
</a></div><div class="nav-item"><a href="/basenode/css/" class="nav-link router-link-active">
  CSS
</a></div> <!----></nav></div></header> <div class="sidebar-mask"></div> <aside class="sidebar"><nav class="nav-links"><div class="nav-item"><a href="/basenode/html/" class="nav-link">
  HTML
</a></div><div class="nav-item"><a href="/basenode/css/" class="nav-link router-link-active">
  CSS
</a></div> <!----></nav>  <ul class="sidebar-links"><li><section class="sidebar-group collapsable depth-0"><p class="sidebar-heading open"><span>CSS</span> <span class="arrow down"></span></p> <ul class="sidebar-links sidebar-group-items"><li><a href="/basenode/css/" aria-current="page" class="sidebar-link">CSS 学习</a></li><li><a href="/basenode/css/day01.html" class="sidebar-link">CSS 第 01 天 —— 基础选择器</a></li><li><a href="/basenode/css/day02.html" class="sidebar-link">CSS 第 02 天 —— 复合选择器</a></li><li><a href="/basenode/css/day03.html" class="sidebar-link">CSS 第 03 天 —— 盒子模型</a></li><li><a href="/basenode/css/day04.html" class="sidebar-link">CSS 第 04 天 —— 浮动</a></li><li><a href="/basenode/css/day05.html" class="sidebar-link">CSS 第 05 天 —— 学成在线</a></li><li><a href="/basenode/css/day06.html" aria-current="page" class="active sidebar-link">CSS 第 06 天 —— 定位</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#能力目标" class="sidebar-link">能力目标</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#☆1-定位核心-子绝父相" class="sidebar-link">☆1. 定位核心 —— 子绝父相</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#_1-1-定位导读" class="sidebar-link">1.1 定位导读</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#☆1-2-为什么需要定位" class="sidebar-link">☆1.2 为什么需要定位</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#☆1-3-定位组成" class="sidebar-link">☆1.3 定位组成</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#☆1-4-相对定位-relative" class="sidebar-link">☆1.4 相对定位（relative）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#_1-5-绝对定位-absolute-没有父级或者父级无定位情况" class="sidebar-link">1.5 绝对定位（absolute）-没有父级或者父级无定位情况</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#☆1-6-绝对定位-absolute-父级有定位情况" class="sidebar-link">☆1.6 绝对定位（absolute）-父级有定位情况</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#☆1-7-绝对定位脱标的不占有原来位置" class="sidebar-link">☆1.7 绝对定位脱标的不占有原来位置</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#☆1-8-子绝父相的由来" class="sidebar-link">☆1.8 子绝父相的由来</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#_1-9-子绝父相案例-hot-模块" class="sidebar-link">1.9 子绝父相案例-hot 模块</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#_2-定位方式-固定和粘性" class="sidebar-link">2. 定位方式 —— 固定和粘性</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#☆2-1-固定定位-fixed" class="sidebar-link">☆2.1 固定定位（fixed）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#_2-2-固定定位小技巧-固定到版心右侧" class="sidebar-link">2.2 固定定位小技巧-固定到版心右侧</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#_2-3-粘性定位-sticky-了解" class="sidebar-link">2.3 粘性定位（sticky）（了解）</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#☆2-4-定位总结" class="sidebar-link">☆2.4 定位总结</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#_3-定位扩展" class="sidebar-link">3. 定位扩展</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#☆3-1-定位的叠放顺序" class="sidebar-link">☆3.1 定位的叠放顺序</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#_3-2-绝对定位的盒子居中算法" class="sidebar-link">3.2 绝对定位的盒子居中算法</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#_3-3-定位的特殊特性" class="sidebar-link">3.3 定位的特殊特性</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#_3-4-浮动元素不会压住标准流的文字定位" class="sidebar-link">3.4 浮动元素不会压住标准流的文字定位</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#_4-淘宝焦点图案例" class="sidebar-link">4. 淘宝焦点图案例</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#_4-1-淘宝焦点图布局分析" class="sidebar-link">4.1 淘宝焦点图布局分析</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#_4-2-淘宝焦点图-大盒子制作" class="sidebar-link">4.2 淘宝焦点图-大盒子制作</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#_4-3-淘宝焦点图-左侧箭头按钮制作" class="sidebar-link">4.3 淘宝焦点图-左侧箭头按钮制作</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#_4-4-淘宝焦点图-右侧箭头按钮制作" class="sidebar-link">4.4 淘宝焦点图-右侧箭头按钮制作</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#_4-5-淘宝焦点图-ul-盒子模块制作" class="sidebar-link">4.5 淘宝焦点图-ul 盒子模块制作</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#_4-6-淘宝焦点图-li-小圆点模块制作" class="sidebar-link">4.6 淘宝焦点图-li 小圆点模块制作</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#☆4-7-网页布局总结" class="sidebar-link">☆4.7 网页布局总结</a></li></ul></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#_5-显示属性" class="sidebar-link">5. 显示属性</a><ul class="sidebar-sub-headers"><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#☆5-1-display-显示隐藏元素" class="sidebar-link">☆5.1 display 显示隐藏元素</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#_5-2-visibility-显示隐藏元素" class="sidebar-link">5.2 visibility 显示隐藏元素</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#☆5-3-overflow-溢出显示隐藏" class="sidebar-link">☆5.3 overflow 溢出显示隐藏</a></li><li class="sidebar-sub-header"><a href="/basenode/css/day06.html#_5-4-土豆案例" class="sidebar-link">5.4 土豆案例</a></li></ul></li></ul></li><li><a href="/basenode/css/day07.html" class="sidebar-link">CSS 第 07 天 —— 高级技巧</a></li><li><a href="/basenode/css/day08.html" class="sidebar-link">CSS 第 08 天 —— HTML5+CSS3 提高</a></li></ul></section></li></ul> </aside> <main class="page"> <div class="theme-default-content content__default"><h1 id="css-第-06-天-定位"><a href="#css-第-06-天-定位" class="header-anchor">#</a> CSS 第 06 天 —— 定位</h1> <h2 id="能力目标"><a href="#能力目标" class="header-anchor">#</a> 能力目标</h2> <ol><li>能够说出<strong>四种定位的应用场景</strong>；</li> <li>能够使用<strong>子绝父相</strong>，实现<strong>学成在线热门课程的图片</strong>显示；</li> <li>能够使用<strong>子绝父相</strong>，实现<strong>淘宝轮播图</strong>（焦点图）案例；</li> <li>能够说出 3 种<strong>显示隐藏</strong>方式之间的区别，并实现<strong>土豆</strong>案例。</li></ol> <h2 id="☆1-定位核心-子绝父相"><a href="#☆1-定位核心-子绝父相" class="header-anchor">#</a> ☆1. 定位核心 —— 子绝父相</h2> <h3 id="_1-1-定位导读"><a href="#_1-1-定位导读" class="header-anchor">#</a> 1.1 定位导读</h3> <blockquote><p>第 1 节课 / 0'59''</p></blockquote> <p>过渡视频，介绍 CSS 第 6 天的学习路径：</p> <ol><li>定位基础</li> <li>综合案例</li> <li>网页布局总结</li> <li>元素的显示和隐藏</li></ol> <h3 id="☆1-2-为什么需要定位"><a href="#☆1-2-为什么需要定位" class="header-anchor">#</a> ☆1.2 为什么需要定位</h3> <blockquote><p>第 1 节课 / 3'43''</p></blockquote> <h4 id="_1-2-1-「为什么需要定位」问题"><a href="#_1-2-1-「为什么需要定位」问题" class="header-anchor">#</a> 1.2.1 「为什么需要定位」问题</h4> <ul><li>问题 1：视频中介绍了几个使用标准流和浮动无法解决的布局场景？分别是什么？</li> <li>问题 2：在开发中什么时候需要使用定位？</li></ul> <h4 id="_1-2-2-「为什么需要定位」答案"><a href="#_1-2-2-「为什么需要定位」答案" class="header-anchor">#</a> 1.2.2 「为什么需要定位」答案</h4> <ul><li><p>问题 1：视频中介绍了几个使用标准流和浮动无法解决的布局场景？分别是什么？</p> <ul><li><p><strong>场景一</strong>：某个元素可以任意摆放在盒子中的某个位置，并且压住其他盒子。</p> <p><img src="/basenode/assets/img/position_demo01.1ccdb8e6.gif" alt="定位示例1"></p></li> <li><p><strong>场景二</strong>：滚动窗口时，盒子固定在屏幕的某个位置。</p> <p><img src="/basenode/assets/img/position_demo02.1eaedc2a.png" alt="定位示例2"></p></li></ul></li> <li><p>问题 2：在开发中什么时候需要使用定位？</p> <blockquote><p><strong>定位</strong>就是解决标准流和浮动无法实现的效果。</p></blockquote> <ul><li><strong>标准流</strong>可以<strong>从上向下</strong>摆放<strong>块级盒子</strong>，<strong>从左向右</strong>摆放<strong>行内盒子</strong>；</li> <li><strong>浮动</strong>可以<strong>从左向右</strong>摆放多个<strong>块级盒子</strong>，盒子之间<strong>没有缝隙</strong>并且<strong>顶端对齐</strong>；</li> <li><strong>定位</strong>可以让盒子：
<ol><li>摆放在另一个盒子中的任意位置；</li> <li><strong>固定</strong>在屏幕中的某个位置；</li> <li>可以压住其他盒子。</li></ol></li></ul></li></ul> <h3 id="☆1-3-定位组成"><a href="#☆1-3-定位组成" class="header-anchor">#</a> ☆1.3 定位组成</h3> <blockquote><p>第 1 节课 / 4'13''</p></blockquote> <h4 id="_1-3-1-「定位组成」问题"><a href="#_1-3-1-「定位组成」问题" class="header-anchor">#</a> 1.3.1 「定位组成」问题</h4> <ul><li>问题 1：定位的概念是什么？</li> <li>问题 2：定位由哪两部分属性构成？各自的作用是什么？</li> <li>问题 3：一共有几种定位模式？</li> <li>问题 4：边偏移有几个属性？标准流或浮动能够使用这四个属性吗？</li></ul> <h4 id="_1-3-2-「定位组成」答案"><a href="#_1-3-2-「定位组成」答案" class="header-anchor">#</a> 1.3.2 「定位组成」答案</h4> <ul><li><p>问题 1：定位的概念是什么？</p> <ul><li>以<strong>不同的方式</strong>，把盒子<strong>定在某一个位置</strong>。</li></ul></li> <li><p>问题 2：定位由哪两部分属性构成？各自的作用是什么？</p> <ul><li><code>定位 = 定位模式 + 边偏移</code></li> <li><strong>定位模式</strong>：用于指定元素的定位方式，通过 <code>position</code> 属性设置</li> <li><strong>边偏移</strong>：根据定位模式确定最终位置，通过 <code>top</code>、<code>bottom</code>、<code>left</code>、<code>right</code> 四个属性设置</li></ul></li> <li><p>问题 3：一共有几种定位模式？</p> <table><thead><tr><th style="text-align:center;">序号</th> <th>值</th> <th>语义</th></tr></thead> <tbody><tr><td style="text-align:center;">1</td> <td>static</td> <td>静态定位</td></tr> <tr><td style="text-align:center;">2</td> <td>relative ☆</td> <td><strong>相对</strong>定位</td></tr> <tr><td style="text-align:center;">3</td> <td>absolute ☆</td> <td><strong>绝对</strong>定位</td></tr> <tr><td style="text-align:center;">4</td> <td>fixed ☆</td> <td><strong>固定</strong>定位</td></tr> <tr><td style="text-align:center;">5</td> <td>sticky</td> <td><strong>粘性</strong>定位</td></tr></tbody></table></li> <li><p>问题 4：边偏移有几个属性？<strong>标准流</strong>或<strong>浮动</strong>能够使用这四个属性吗？</p> <table><thead><tr><th>边偏移属性</th> <th style="text-align:left;">示例</th> <th>描述</th></tr></thead> <tbody><tr><td><code>top</code></td> <td style="text-align:left;"><code>top: 80px</code></td> <td><strong>顶端</strong>偏移量，定义元素相对于其父元素<strong>上边线的距离</strong>。</td></tr> <tr><td><code>bottom</code></td> <td style="text-align:left;"><code>bottom: 80px</code></td> <td><strong>底部</strong>偏移量，定义元素相对于其父元素<strong>下边线的距离</strong>。</td></tr> <tr><td><code>left</code></td> <td style="text-align:left;"><code>left: 80px</code></td> <td><strong>左侧</strong>偏移量，定义元素相对于其父元素<strong>左边线的距离</strong>。</td></tr> <tr><td><code>right</code></td> <td style="text-align:left;"><code>right: 80px</code></td> <td><strong>右侧</strong>偏移量，定义元素相对于其父元素<strong>右边线的距离</strong></td></tr></tbody></table> <blockquote><p><strong>标准流</strong>或<strong>浮动</strong>与这四个属性搭配使用无效。</p></blockquote></li></ul> <h3 id="☆1-4-相对定位-relative"><a href="#☆1-4-相对定位-relative" class="header-anchor">#</a> ☆1.4 相对定位（relative）</h3> <blockquote><p>第 1 节课 / 8'16''</p></blockquote> <h4 id="_1-4-1-「相对定位」问题"><a href="#_1-4-1-「相对定位」问题" class="header-anchor">#</a> 1.4.1 「相对定位」问题</h4> <ul><li>问题 1：静态定位的作用是什么？静态定位使用边偏移属性有效吗？开发中用得多吗？</li> <li>问题 2：相对定位（<code>relative</code>）的语法是什么？</li> <li>问题 3：相对定位（<code>relative</code>）是<strong>相对什么来定位的</strong>？</li> <li>问题 4：相对定位（<code>relative</code>）会脱标吗？</li> <li>问题 5：<strong>只</strong>给盒子设置了 <code>position: relative;</code> 属性，盒子的位置会发生变化吗？为什么？</li></ul> <h4 id="_1-4-2-「相对定位」答案"><a href="#_1-4-2-「相对定位」答案" class="header-anchor">#</a> 1.4.2 「相对定位」答案</h4> <ul><li><p>问题 1：静态定位的作用是什么？静态定位使用边偏移属性有效吗？开发中用得多吗？</p> <ul><li><strong>静态定位</strong> <code>static</code> 是元素的<strong>默认</strong>定位方式，表示<strong>没有定位的意思</strong>，类似于：<code>border</code> 属性的 <code>none</code>；</li> <li><strong>静态定位</strong>按照标准流特性摆放位置，它没有边偏移，使用边偏移没有效果；</li> <li><strong>静态定位</strong>在布局时几乎不用。</li></ul></li> <li><p>问题 2：相对定位（<code>relative</code>）的语法是什么？</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
</code></pre></div></li> <li><p>问题 3：相对定位（<code>relative</code>）是<strong>相对什么来定位的</strong>？</p> <ul><li><strong>相对定位</strong>是相对元素自己<strong>原来的位置</strong>来定位的（自恋）。</li></ul></li> <li><p>问题 4：相对定位（<code>relative</code>）会脱标吗？</p> <ul><li><strong>相对定位</strong>不会脱标，原有在标准流的位置继续保留，后面的盒子仍然以标准流的方式对待它。</li></ul></li> <li><p>问题 5：<strong>只</strong>给盒子设置了 <code>position: relative;</code> 属性，盒子的位置会发生变化吗？为什么？</p> <ul><li>不会发生变化；</li> <li><code>定位 = 定位模式 + 边偏移</code>，给元素<strong>指定成相对定位</strong>（定位模式），但没有指定<strong>边偏移属性</strong>，元素仍然会呆在原有位置。</li></ul></li></ul> <h4 id="_1-4-3-「相对定位」练习"><a href="#_1-4-3-「相对定位」练习" class="header-anchor">#</a> 1.4.3 「相对定位」练习</h4> <ol><li><p>练习时长：5 分钟</p></li> <li><p>练习目的：体验<strong>相对定位</strong>的特性 —— <strong>相对原来位置定位</strong> + <strong>不脱标</strong></p></li> <li><p>代码素材：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box1,
.box2,
.box3</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.box1</span> <span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> blue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.box2</span> <span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.box3</span> <span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>演练结果：让<strong>粉色盒子</strong>距离原有位置的<strong>顶部偏移 50px</strong> / <strong>左侧偏移 50px</strong>；</p></li> <li><p>演练扩展：</p> <ol><li>同时设置 <code>left: 50px; right: 50px;</code> 有效果吗？为什么？</li> <li>定位属性建议写在 <code>background-color</code> 属性的前面还是后面？为什么？</li></ol></li></ol> <h3 id="_1-5-绝对定位-absolute-没有父级或者父级无定位情况"><a href="#_1-5-绝对定位-absolute-没有父级或者父级无定位情况" class="header-anchor">#</a> 1.5 绝对定位（absolute）-没有父级或者父级无定位情况</h3> <blockquote><p>第 1 节课 / 7'20''</p></blockquote> <h4 id="_1-5-1-「绝对定位-absolute-」-没有父级或者父级无定位情况问题"><a href="#_1-5-1-「绝对定位-absolute-」-没有父级或者父级无定位情况问题" class="header-anchor">#</a> 1.5.1 「绝对定位（absolute）」-没有父级或者父级无定位情况问题</h4> <ul><li>问题 1：绝对定位（<code>absolute</code>）是相对什么元素来定位的？</li> <li>问题 2：绝对定位（<code>absolute</code>）的语法是什么？</li> <li>问题 3：绝对定位（<code>absolute</code>）的盒子如果没有父级或者父级没有定位时，是参照谁来定位的？</li></ul> <h4 id="_1-5-2-「绝对定位-absolute-」-没有父级或者父级无定位情况答案"><a href="#_1-5-2-「绝对定位-absolute-」-没有父级或者父级无定位情况答案" class="header-anchor">#</a> 1.5.2 「绝对定位（absolute）」-没有父级或者父级无定位情况答案</h4> <ul><li><p>问题 1：绝对定位（<code>absolute</code>）是相对什么元素来定位的？</p> <ul><li>相对最近一级<strong>设置了定位属性</strong>父级元素定位的（不包含 <code>static</code>）（拼爹型）。</li></ul></li> <li><p>问题 2：绝对定位（<code>absolute</code>）的语法是什么？</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
</code></pre></div></li> <li><p>问题 3：绝对定位（<code>absolute</code>）的盒子如果没有父级或者父级没有定位时，是参照谁来定位的？</p> <ul><li>如果盒子没有父级（是 <code>body</code> 的亲儿子）或者父级没有定位，会相对浏览器定位。</li></ul></li></ul> <h4 id="_1-5-3「绝对定位-absolute-」-没有父级或者父级无定位情况练习"><a href="#_1-5-3「绝对定位-absolute-」-没有父级或者父级无定位情况练习" class="header-anchor">#</a> 1.5.3「绝对定位（absolute）」-没有父级或者父级无定位情况练习</h4> <ol><li><p>练习时长：5 分钟</p></li> <li><p>练习目的：体验<strong>绝对定位</strong>的特性 —— 没有父级或者父级无定位时相对浏览器定位</p></li> <li><p>代码素材：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">*</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">body</span> <span class="token punctuation">{</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 2000px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.father</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 300px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.son</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> skyblue<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>father<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>son<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>演练结果：</p> <ol><li>将 <code>.son</code> 设置为绝对定位，距离右侧 <code>50px</code>，距离底端 <code>50px</code>，浏览查看效果，说出是参照谁定位，为什么？</li> <li>将 <code>.father</code> 设置为<strong>相对定位</strong>（<code>relative</code>），再次浏览查看效果，说出是参照谁定位，为什么？</li></ol></li> <li><p>演练扩展：</p> <ol><li>在布局时，让盒子相对浏览器定位方便吗？为什么？</li></ol></li></ol> <h3 id="☆1-6-绝对定位-absolute-父级有定位情况"><a href="#☆1-6-绝对定位-absolute-父级有定位情况" class="header-anchor">#</a> ☆1.6 绝对定位（absolute）-父级有定位情况</h3> <blockquote><p>第 2 节课 / 6'06''</p></blockquote> <h4 id="_1-6-1-「绝对定位-absolute-」-父级有定位情况问题"><a href="#_1-6-1-「绝对定位-absolute-」-父级有定位情况问题" class="header-anchor">#</a> 1.6.1 「绝对定位（absolute）」-父级有定位情况问题</h4> <ul><li>问题 1：绝对定位（<code>absolute</code>）是相对什么元素来定位的？</li> <li>思考 1：在布局时，让盒子相对父级以上的元素定位好吗？</li></ul> <h4 id="_1-6-2-「绝对定位-absolute-」-父级有定位情况答案"><a href="#_1-6-2-「绝对定位-absolute-」-父级有定位情况答案" class="header-anchor">#</a> 1.6.2 「绝对定位（absolute）」-父级有定位情况答案</h4> <ul><li><p>问题 1：绝对定位（<code>absolute</code>）是相对什么元素来定位的？</p> <ul><li>相对最近一级<strong>有定位属性</strong>的父级元素定位，如果所有父级都没有定位属性则相对于浏览器定位。</li></ul></li> <li><p>思考 1：在布局时，让盒子相对父级以上的元素定位好吗？</p> <ul><li>不好，一旦出现问题，不好排查。</li> <li>可以将父级元素设置为相对定位（<code>relative</code>），因为相对定位的盒子：<strong>不会脱标</strong> + <strong>不设置边偏移位置不会变化</strong>。</li></ul></li></ul> <h3 id="☆1-7-绝对定位脱标的不占有原来位置"><a href="#☆1-7-绝对定位脱标的不占有原来位置" class="header-anchor">#</a> ☆1.7 绝对定位脱标的不占有原来位置</h3> <blockquote><p>第 2 节课 / 2'09''</p></blockquote> <h4 id="_1-7-1-「绝对定位脱标的不占有原来位置」问题"><a href="#_1-7-1-「绝对定位脱标的不占有原来位置」问题" class="header-anchor">#</a> 1.7.1 「绝对定位脱标的不占有原来位置」问题</h4> <ul><li>问题 1：绝对定位（<code>absolute</code>）的盒子会脱标吗？</li> <li>问题 2：绝对定位脱标有什么好处？</li></ul> <h4 id="_1-7-2-「绝对定位脱标的不占有原来位置」答案"><a href="#_1-7-2-「绝对定位脱标的不占有原来位置」答案" class="header-anchor">#</a> 1.7.2 「绝对定位脱标的不占有原来位置」答案</h4> <ul><li><p>问题 1：绝对定位（<code>absolute</code>）的盒子会脱标吗？</p> <ul><li>会脱标，不在占有原来的位置</li></ul></li> <li><p>问题 2：绝对定位脱标有什么好处？</p> <ul><li>可以在父盒子内<strong>任意摆放位置</strong>，同时<strong>不会影响父盒子中的其他元素</strong>。</li></ul></li> <li><p>思考 1：浮动元素也会脱标，但是能随意摆放位置吗？</p> <ul><li>浮动元素不能随意摆放位置，会靠左或者靠右一个一个摆放，紧紧的挨在一起，并且顶部对齐。</li></ul></li></ul> <h4 id="_1-7-3-「绝对定位脱标的不占有原来位置」练习"><a href="#_1-7-3-「绝对定位脱标的不占有原来位置」练习" class="header-anchor">#</a> 1.7.3 「绝对定位脱标的不占有原来位置」练习</h4> <ol><li><p>练习时长：5 分钟</p></li> <li><p>练习目的：体验<strong>绝对定位脱标的不占有原来位置</strong>的好处 —— 在父盒子内<strong>任意摆放位置</strong>，同时<strong>不会影响父盒子中的其他元素</strong>。</p></li> <li><p>代码素材：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>box<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./images/card_1.gif<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./images/logo_1.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>logo<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>图片素材：</p> <p><img src="/basenode/assets/img/card_1.f17f0e2e.gif" alt="card_1"> <img src="" alt="logo_1"></p></li> <li><p>案例效果：</p> <p><img src="/basenode/assets/img/demo_1_result.a7f7ea66.png" alt="demo_1_result"></p></li> <li><p>参考代码：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 245px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 245px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.logo</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">bottom</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> 5px<span class="token punctuation">;</span>
  <span class="token property">border</span><span class="token punctuation">:</span> 3px solid #fff<span class="token punctuation">;</span>
  <span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <h3 id="☆1-8-子绝父相的由来"><a href="#☆1-8-子绝父相的由来" class="header-anchor">#</a> ☆1.8 子绝父相的由来</h3> <blockquote><p>第 2 节课 / 7'07''</p></blockquote> <h4 id="_1-8-1-「子绝父相的由来」问题"><a href="#_1-8-1-「子绝父相的由来」问题" class="header-anchor">#</a> 1.8.1 「子绝父相的由来」问题</h4> <ul><li>问题 1：什么是子绝父相？</li></ul> <h4 id="_1-8-2-「子绝父相的由来」答案"><a href="#_1-8-2-「子绝父相的由来」答案" class="header-anchor">#</a> 1.8.2 「子绝父相的由来」答案</h4> <ul><li><p>问题 1：什么是子绝父相？</p> <ul><li><strong>子级使用绝对定位，父级使用相对定位</strong></li> <li>父级使用相对定位：
<ul><li>不脱标，在标准流中占据空间</li> <li>绝对定位的儿子们都参考父亲进行定位</li></ul></li> <li>子级使用绝对定位：
<ul><li>脱标，不影响其他元素的摆放</li> <li>自己则相对父级任意摆放位置</li></ul></li></ul></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>子绝父相不是永远不变的，如果父元素不需要占有位置，子绝父绝也会遇到。</p></div> <h3 id="_1-9-子绝父相案例-hot-模块"><a href="#_1-9-子绝父相案例-hot-模块" class="header-anchor">#</a> 1.9 子绝父相案例-hot 模块</h3> <blockquote><p>第 2 节课 / 7'46''</p></blockquote> <p>请使用<strong>子绝父相</strong>，并参考视频完成给学成在线项目增加「hot」图片标识。</p> <ol><li><p>练习要点</p> <ol><li>在一定规模的代码量下修改代码；</li> <li>使用<strong>子代选择器</strong>避免图片选择器冲突；</li> <li>子绝父相。</li></ol></li> <li><p>案例素材：</p> <p><img src="" alt="hot"></p></li> <li><p>参考代码</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>em</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>images/hot.png<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>热门课程<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>em</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./uploads/course01.png<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>课程图片<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box-bd ul li</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  ...<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.box-bd ul li &gt; img</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.box-bd ul li em</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 4px<span class="token punctuation">;</span>
  <span class="token property">right</span><span class="token punctuation">:</span> -4px<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <ol><li>在 Chrome 中测试好位置，回到 CSS 直接修改，开发更高效；</li> <li>在编写样式时，<strong>每个模块的大盒子</strong>前增加注释可以方便快速定位代码。</li></ol></div> <h2 id="_2-定位方式-固定和粘性"><a href="#_2-定位方式-固定和粘性" class="header-anchor">#</a> 2. 定位方式 —— 固定和粘性</h2> <h3 id="☆2-1-固定定位-fixed"><a href="#☆2-1-固定定位-fixed" class="header-anchor">#</a> ☆2.1 固定定位（fixed）</h3> <blockquote><p>第 3 节课 / 7'29''</p></blockquote> <h4 id="_2-1-1-「固定定位」问题"><a href="#_2-1-1-「固定定位」问题" class="header-anchor">#</a> 2.1.1 「固定定位」问题</h4> <ul><li>问题 1：固定定位（<code>fixed</code>）是相对什么来定位的？应用场景是什么？</li> <li>问题 2：固定定位（<code>fixed</code>）的语法是什么？</li> <li>问题 3：固定定位（<code>fixed</code>）的元素会脱标吗？</li> <li>问题 4：在开发时为什么不建议直接控制图片？而是要给图片加一个父盒子？</li> <li>问题 5：用户调整浏览器的大小时浏览器的可视区域会变化吗？固定定位的元素呢？</li></ul> <h4 id="_2-1-2-「固定定位」答案"><a href="#_2-1-2-「固定定位」答案" class="header-anchor">#</a> 2.1.2 「固定定位」答案</h4> <ul><li><p>问题 1：固定定位（<code>fixed</code>）是相对什么来定位的？应用场景是什么？</p> <ul><li>固定定位（<code>fixed</code>）是相对浏览器的可视窗口来定位的；</li> <li>可以在浏览器的页面滚动时，元素的位置保持不变。</li></ul></li> <li><p>问题 2：固定定位（<code>fixed</code>）的语法是什么？</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">position</span><span class="token punctuation">:</span> fixed<span class="token punctuation">;</span>
</code></pre></div></li> <li><p>问题 3：固定定位（<code>fixed</code>）的元素会脱标吗？</p> <ul><li>会；</li> <li>固定定位的元素同样不会占有原先的位置。</li></ul></li> <li><p>问题 4：在开发时为什么不建议直接控制图片？而是要给图片加一个父盒子？</p> <ul><li>图片默认是按照实际大小显示的；</li> <li>页面中的图片通常会很多；</li> <li>用一个盒子包起来，控制图片更容易。</li></ul></li> <li><p>问题 5：用户调整浏览器的大小时浏览器的可视区域会变化吗？固定定位的元素呢？</p> <ul><li>会；</li> <li>固定定位的元素会根据<strong>边偏移</strong>属性<strong>重新调整显示位置</strong>。</li></ul></li></ul> <h4 id="_2-1-3-「固定定位」练习"><a href="#_2-1-3-「固定定位」练习" class="header-anchor">#</a> 2.1.3 「固定定位」练习</h4> <ol><li><p>练习时长：5 分钟</p></li> <li><p>练习目的：体验<strong>固定定位</strong>的特点 —— 相对浏览器的可视窗口来定位 + 脱标。</p></li> <li><p>代码素材：</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>dj<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./images/pvp.png<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span><span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>w<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div><div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.w</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 800px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 1000px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0 auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>图片素材：</p> <p><img src="" alt="pvp"></p></li></ol> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <p>如果想让图片靠近版心定位怎么做？</p></div> <h3 id="_2-2-固定定位小技巧-固定到版心右侧"><a href="#_2-2-固定定位小技巧-固定到版心右侧" class="header-anchor">#</a> 2.2 固定定位小技巧-固定到版心右侧</h3> <blockquote><p>第 3 节课 / 6'31''</p></blockquote> <h4 id="_2-2-1-「固定到版心右侧」问题"><a href="#_2-2-1-「固定到版心右侧」问题" class="header-anchor">#</a> 2.2.1 「固定到版心右侧」问题</h4> <ul><li>问题 1：固定到版心右侧的实现步骤是什么？</li></ul> <h4 id="_2-2-2-「固定到版心右侧」答案"><a href="#_2-2-2-「固定到版心右侧」答案" class="header-anchor">#</a> 2.2.2 「固定到版心右侧」答案</h4> <ul><li><p>问题 1：固定到版心右侧的实现步骤是什么？</p> <ol><li><code>left: 50%;</code>；</li> <li><code>margin-left: 版心宽度的一半</code>。</li></ol></li></ul> <h4 id="_2-2-3-「固定到版心右侧」练习"><a href="#_2-2-3-「固定到版心右侧」练习" class="header-anchor">#</a> 2.2.3 「固定到版心右侧」练习</h4> <ol><li><p>练习时长：5 分钟；</p></li> <li><p>练习目的：巩固让盒子距离版心右侧定位的算法。</p></li> <li><p>练习扩展：怎么让 1.7.3 「绝对定位脱标的不占有原来位置」练习中的 <code>logo</code> 图片居中显示？</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token comment">/* 1. 向左移动父盒子宽度的 50% */</span>
<span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
<span class="token comment">/* 2. 用负的 margin-left 向右移动图片宽度的一半 */</span>
<span class="token property">margin-left</span><span class="token punctuation">:</span> -40px<span class="token punctuation">;</span>
</code></pre></div></li></ol> <h3 id="_2-3-粘性定位-sticky-了解"><a href="#_2-3-粘性定位-sticky-了解" class="header-anchor">#</a> 2.3 粘性定位（sticky）（了解）</h3> <blockquote><p>第 3 节课 / 5'12''</p></blockquote> <h4 id="_2-3-1-「粘性定位」问题"><a href="#_2-3-1-「粘性定位」问题" class="header-anchor">#</a> 2.3.1 「粘性定位」问题</h4> <ul><li>问题 1：粘性定位（<code>sticky</code>）的特点是什么？</li> <li>问题 2：粘性定位（<code>sticky</code>）的应用场景是什么？</li> <li>问题 3：粘性定位（<code>sticky</code>）的语法是什么？</li> <li>问题 4：粘性定位（<code>sticky</code>）有什么注意事项？</li></ul> <h4 id="_2-3-2-「粘性定位」答案"><a href="#_2-3-2-「粘性定位」答案" class="header-anchor">#</a> 2.3.2 「粘性定位」答案</h4> <ul><li><p>问题 1：粘性定位（<code>sticky</code>）的特点是什么？</p> <ul><li>粘性定位（<code>sticky</code>）同样也是相对浏览器的可视窗口来定位的；</li> <li>粘性定位（<code>sticky</code>）不脱标，会占有原先的位置</li></ul></li> <li><p>问题 2：粘性定位（<code>sticky</code>）的应用场景是什么？</p> <ul><li>把导航栏固定在屏幕的顶部，始终保持可见</li> <li>把操作菜单固定在屏幕的左侧或右侧，始终保持可见</li></ul></li> <li><p>问题 3：粘性定位（<code>sticky</code>）的语法是什么？</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">position</span><span class="token punctuation">:</span> sticky<span class="token punctuation">;</span>
</code></pre></div></li> <li><p>问题 4：粘性定位（<code>sticky</code>）有什么注意事项？</p> <ul><li><p>必须至少指定一个边偏移的属性；</p></li> <li><p>兼容性不好。</p> <p><img src="/basenode/assets/img/caniuse_sticcky.0ee411c8.png" alt="caniuse-sticky"></p></li></ul></li></ul> <h3 id="☆2-4-定位总结"><a href="#☆2-4-定位总结" class="header-anchor">#</a> ☆2.4 定位总结</h3> <blockquote><p>第 3 节课 / 2'41''</p></blockquote> <table><thead><tr><th style="text-align:center;">序号</th> <th>值</th> <th>语义</th> <th>脱标</th> <th>移动位置</th> <th>常用</th> <th>场景</th></tr></thead> <tbody><tr><td style="text-align:center;">1</td> <td>static</td> <td>静态定位</td> <td>否</td> <td>不移动</td> <td>几乎不用</td> <td>不定位</td></tr> <tr><td style="text-align:center;">2</td> <td>relative ☆</td> <td><strong>相对</strong>定位</td> <td>否</td> <td>相对自身</td> <td>常用</td> <td><strong>子绝父相</strong></td></tr> <tr><td style="text-align:center;">3</td> <td>absolute ☆</td> <td><strong>绝对</strong>定位</td> <td>是</td> <td>带定位的父级</td> <td>常用</td> <td><strong>子绝父相</strong></td></tr> <tr><td style="text-align:center;">4</td> <td>fixed ☆</td> <td><strong>固定</strong>定位</td> <td>是</td> <td>浏览器可视区</td> <td>常用</td> <td>浏览器可视区</td></tr> <tr><td style="text-align:center;">5</td> <td>sticky</td> <td><strong>粘性</strong>定位</td> <td>否</td> <td>浏览器可视区</td> <td>不常用</td> <td>浏览器可视区</td></tr></tbody></table> <h2 id="_3-定位扩展"><a href="#_3-定位扩展" class="header-anchor">#</a> 3. 定位扩展</h2> <h3 id="☆3-1-定位的叠放顺序"><a href="#☆3-1-定位的叠放顺序" class="header-anchor">#</a> ☆3.1 定位的叠放顺序</h3> <blockquote><p>第 3 节课 / 7'20''</p></blockquote> <h4 id="_3-1-1-「定位的叠放顺序」问题"><a href="#_3-1-1-「定位的叠放顺序」问题" class="header-anchor">#</a> 3.1.1 「定位的叠放顺序」问题</h4> <ul><li>问题 1：定位的叠放顺序的应用场景是什么？</li> <li>问题 2：定位的叠放顺序的语法是什么？</li> <li>问题 3：定位的叠放顺序有什么注意事项？</li></ul> <h4 id="_3-1-2-「定位的叠放顺序」答案"><a href="#_3-1-2-「定位的叠放顺序」答案" class="header-anchor">#</a> 3.1.2 「定位的叠放顺序」答案</h4> <ul><li><p>问题 1：定位的叠放顺序的应用场景是什么？</p> <ul><li>在使用定位时，如果出现盒子重叠的情况，可以使用 <code>z-index</code> 控制盒子的前后顺序。</li></ul></li> <li><p>问题 2：定位的叠放顺序的语法是什么？</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">z-index</span><span class="token punctuation">:</span> 数值<span class="token punctuation">;</span>
</code></pre></div></li> <li><p>问题 3：定位的叠放顺序有什么注意事项？</p> <ol><li>数值是<strong>整数</strong>，默认是 <code>auto</code>，数值越大，盒子越靠前；</li> <li>数值相同，按书写顺序显示，后书写的盒子显示在上方；</li> <li>数值后面没有单位；</li> <li>只有定位的盒子在可以使用 <code>z-index</code> 属性。</li></ol></li></ul> <h3 id="_3-2-绝对定位的盒子居中算法"><a href="#_3-2-绝对定位的盒子居中算法" class="header-anchor">#</a> 3.2 绝对定位的盒子居中算法</h3> <blockquote><p>第 3 节课 / 7'32''</p></blockquote> <h4 id="_3-2-1-「绝对定位的盒子居中算法」问题"><a href="#_3-2-1-「绝对定位的盒子居中算法」问题" class="header-anchor">#</a> 3.2.1 「绝对定位的盒子居中算法」问题</h4> <ul><li>问题 1：绝对定位的盒子可以使用 <code>margin: 0 auto</code>; 实现水平居中吗？</li> <li>问题 2：绝对定位的盒子实现水平居中的步骤是什么？</li></ul> <h4 id="_3-2-2-「绝对定位的盒子居中算法」答案"><a href="#_3-2-2-「绝对定位的盒子居中算法」答案" class="header-anchor">#</a> 3.2.2 「绝对定位的盒子居中算法」答案</h4> <ul><li><p>问题 1：绝对定位的盒子可以使用 <code>margin: 0 auto</code>; 实现水平居中吗？</p> <ul><li>不能</li></ul></li> <li><p>问题 2：绝对定位的盒子实现水平居中的步骤是什么？</p> <ol><li><code>left: 50%;</code> <strong>向右</strong>移动到父盒子<strong>宽度</strong>的一半；</li> <li><code>margin-left: -宽度的一半;</code> 利用负数<strong>向左</strong>移动子盒<strong>宽度</strong>的一半；</li> <li><code>top: 50%;</code> <strong>向下</strong>移动到父盒子<strong>高度</strong>的一半；</li> <li><code>margin-top: -高度的一半;</code> 利用负数<strong>向上</strong>移动子盒<strong>高度</strong>的一半。</li></ol> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <ul><li>绝对定位之后，不仅会脱标，而且有层次 —— 没有相邻的盒子；</li> <li>此时与边偏移属性联用，修改 <code>margin</code> 可以参照盒子的外边框位置继续调整盒子的位置。</li></ul></div></li></ul> <h4 id="_3-2-3-「绝对定位的盒子居中算法」练习"><a href="#_3-2-3-「绝对定位的盒子居中算法」练习" class="header-anchor">#</a> 3.2.3 「绝对定位的盒子居中算法」练习</h4> <ol><li><p>练习时长：5 分钟；</p></li> <li><p>练习目的：巩固让绝对定位的盒子实现水平垂直居中的算法。</p></li> <li><p>参考代码：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.box</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
  <span class="token property">margin-left</span><span class="token punctuation">:</span> -100px<span class="token punctuation">;</span>
  <span class="token property">margin-top</span><span class="token punctuation">:</span> -100px<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 200px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> pink<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <h3 id="_3-3-定位的特殊特性"><a href="#_3-3-定位的特殊特性" class="header-anchor">#</a> 3.3 定位的特殊特性</h3> <blockquote><p>第 4 节课 / 2'47''</p></blockquote> <h4 id="_3-3-1-「定位的特殊特性」问题"><a href="#_3-3-1-「定位的特殊特性」问题" class="header-anchor">#</a> 3.3.1 「定位的特殊特性」问题</h4> <ul><li>问题 1：<strong>行内元素</strong>添加绝对或固定定位后，可以直接设置宽度和高度吗？</li> <li>问题 2：<strong>块级元素</strong>添加绝对或固定定位后，如果不给宽度和高度，大小是怎么计算的？</li> <li>问题 3：脱标的盒子会触发外边距合并吗？</li></ul> <h4 id="_3-3-2-「定位的特殊特性」答案"><a href="#_3-3-2-「定位的特殊特性」答案" class="header-anchor">#</a> 3.3.2 「定位的特殊特性」答案</h4> <ul><li><p>问题 1：<strong>行内元素</strong>添加绝对或固定定位后，可以直接设置宽度和高度吗？</p> <ul><li>可以</li></ul></li> <li><p>问题 2：<strong>块级元素</strong>添加绝对或固定定位后，如果不给宽度和高度，大小是怎么计算的？</p> <ul><li>默认是实际内容的大小</li></ul></li> <li><p>问题 3：脱标的盒子会触发外边距合并吗？</p> <ul><li>脱标的盒子（浮动、绝对定位、固定定位）不会触发外边距合并。</li></ul></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>布局的时候要养成一个习惯：</p> <ol><li>布局的盒子只负责布局，不要负责内容；</li> <li>内容的盒子使用布局盒子包裹起来。</li></ol> <p>这样，在布局的时候既轻松又愉快。</p></div> <h3 id="_3-4-浮动元素不会压住标准流的文字定位"><a href="#_3-4-浮动元素不会压住标准流的文字定位" class="header-anchor">#</a> 3.4 浮动元素不会压住标准流的文字定位</h3> <blockquote><p>第 4 节课 / 5'09''</p></blockquote> <h4 id="_3-4-1-「浮动元素不会压住标准流的文字定位」问题"><a href="#_3-4-1-「浮动元素不会压住标准流的文字定位」问题" class="header-anchor">#</a> 3.4.1 「浮动元素不会压住标准流的文字定位」问题</h4> <ul><li>问题 1：<strong>绝对定位</strong>和<strong>浮动</strong>哪一个会压住下面标准流的文字？为什么？</li></ul> <h4 id="_3-4-2-「浮动元素不会压住标准流的文字定位」答案"><a href="#_3-4-2-「浮动元素不会压住标准流的文字定位」答案" class="header-anchor">#</a> 3.4.2 「浮动元素不会压住标准流的文字定位」答案</h4> <ul><li><p>问题 1：<strong>绝对定位</strong>和<strong>浮动</strong>哪一个会压住下面标准流的文字？为什么？</p> <ul><li>绝对定位会压住文字，浮动不会；</li> <li>浮动最开始的设计是为了实现<strong>文字环绕</strong>效果的。</li></ul></li></ul> <h2 id="_4-淘宝焦点图案例"><a href="#_4-淘宝焦点图案例" class="header-anchor">#</a> 4. 淘宝焦点图案例</h2> <h3 id="_4-1-淘宝焦点图布局分析"><a href="#_4-1-淘宝焦点图布局分析" class="header-anchor">#</a> 4.1 淘宝焦点图布局分析</h3> <blockquote><p>第 4 节课 / 3'11''</p></blockquote> <h4 id="_4-1-1-淘宝焦点图案例效果图"><a href="#_4-1-1-淘宝焦点图案例效果图" class="header-anchor">#</a> 4.1.1 淘宝焦点图案例效果图</h4> <p><img src="/basenode/assets/img/taobao-result.d0baf9a0.png" alt="淘宝焦点图案例效果图"></p> <h4 id="_4-1-2-淘宝焦点图案例结构图"><a href="#_4-1-2-淘宝焦点图案例结构图" class="header-anchor">#</a> 4.1.2 淘宝焦点图案例结构图</h4> <p><img src="/basenode/assets/img/taobao-proto.a7abe5f3.png" alt="淘宝焦点图案例结构图"></p> <h4 id="_4-1-3-淘宝焦点图开发步骤"><a href="#_4-1-3-淘宝焦点图开发步骤" class="header-anchor">#</a> 4.1.3 淘宝焦点图开发步骤</h4> <ol><li>大盒子类名：<code>tb-slider</code>；</li> <li>里面放一张图片（标准流）；</li> <li>定位：
<ol><li><strong>左右两个按钮</strong>用链接实现：左箭头 <code>prev</code> / 右箭头 <code>next</code>；</li> <li><strong>底侧小圆点</strong>用 <code>ul</code> 实现：<code>indicator</code>。</li></ol></li></ol> <h3 id="_4-2-淘宝焦点图-大盒子制作"><a href="#_4-2-淘宝焦点图-大盒子制作" class="header-anchor">#</a> 4.2 淘宝焦点图-大盒子制作</h3> <blockquote><p>第 4 节课 / 3'49''</p></blockquote> <h4 id="_4-2-1-大盒子制作结构信息"><a href="#_4-2-1-大盒子制作结构信息" class="header-anchor">#</a> 4.2.1 大盒子制作结构信息</h4> <ol><li>结构：<code>.tb-slider&gt;img</code>；</li> <li><code>.tb-slider</code> 宽高：<code>520px * 280px</code> / 居中显示</li> <li><code>img</code> 宽高：<code>100% * 100%</code></li></ol> <h5 id="图片素材"><a href="#图片素材" class="header-anchor">#</a> 图片素材</h5> <p><img src="/basenode/assets/img/tb.6c2e8bbb.jpg" alt="淘宝焦点图"></p> <h4 id="_4-2-2-大盒子制作代码实现"><a href="#_4-2-2-大盒子制作代码实现" class="header-anchor">#</a> 4.2.2 大盒子制作代码实现</h4> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">*</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">padding</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.tb-slider</span> <span class="token punctuation">{</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 100px auto<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 520px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 280px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #ccc<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.tb-slider img</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><h3 id="_4-3-淘宝焦点图-左侧箭头按钮制作"><a href="#_4-3-淘宝焦点图-左侧箭头按钮制作" class="header-anchor">#</a> 4.3 淘宝焦点图-左侧箭头按钮制作</h3> <blockquote><p>第 4 节课 / 7'45''</p></blockquote> <h4 id="_4-3-1-左侧箭头按钮结构信息"><a href="#_4-3-1-左侧箭头按钮结构信息" class="header-anchor">#</a> 4.3.1 左侧箭头按钮结构信息</h4> <ol><li>结构：<code>a.prev{&amp;lt;}</code>；</li> <li>大小：<code>.prev</code> 宽高：<code>20px * 30px</code>；</li> <li>位置：绝对定位 / 左侧 <code>0</code> / 垂直居中；</li> <li>显示属性：
<ol><li>背景色：<code>rgba(0, 0, 0, 0.3)</code></li> <li>文本水平垂直居中 / 白色 / 没有下划线</li> <li>圆角矩形</li></ol></li></ol> <h4 id="_4-3-1-左侧箭头按钮代码实现"><a href="#_4-3-1-左侧箭头按钮代码实现" class="header-anchor">#</a> 4.3.1 左侧箭头按钮代码实现</h4> <ol><li><p>结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>prev<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token entity named-entity" title="&lt;">&amp;lt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>大小和位置：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token property">top</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
<span class="token property">margin-top</span><span class="token punctuation">:</span> -15px<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 20px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
<span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.3<span class="token punctuation">)</span><span class="token punctuation">;</span>
</code></pre></div></li> <li><p>修改父盒子定位属性，<strong>子绝父相</strong>：</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
</code></pre></div></li> <li><p>显示属性</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">text-align</span><span class="token punctuation">:</span> center<span class="token punctuation">;</span>
<span class="token property">line-height</span><span class="token punctuation">:</span> 30px<span class="token punctuation">;</span>
<span class="token property">color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token property">text-decoration</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
</code></pre></div></li> <li><p>圆角矩形</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">border-radius</span><span class="token punctuation">:</span> 0 15px 15px 0<span class="token punctuation">;</span>
</code></pre></div></li></ol> <h3 id="_4-4-淘宝焦点图-右侧箭头按钮制作"><a href="#_4-4-淘宝焦点图-右侧箭头按钮制作" class="header-anchor">#</a> 4.4 淘宝焦点图-右侧箭头按钮制作</h3> <blockquote><p>第 4 节课 / 6'24''</p></blockquote> <h4 id="_4-4-1-右侧箭头按钮结构信息"><a href="#_4-4-1-右侧箭头按钮结构信息" class="header-anchor">#</a> 4.4.1 右侧箭头按钮结构信息</h4> <ol><li>结构：<code>a.next{&amp;gt;}</code>；</li> <li>大小：<code>.next</code> 宽高：<code>20px * 30px</code>；</li> <li>位置：绝对定位 / 右侧 <code>0</code> / 垂直居中；</li> <li>显示属性：
<ol><li>背景色：<code>rgba(0, 0, 0, 0.3)</code></li> <li>文本水平垂直居中 / 白色 / 没有下划线</li> <li>圆角矩形</li></ol></li></ol> <h5 id="与左侧按钮的区别"><a href="#与左侧按钮的区别" class="header-anchor">#</a> 与左侧按钮的区别</h5> <ol><li>定位：右侧</li> <li>圆角矩形</li></ol> <blockquote><p>使用并集选择器统一设置样式</p></blockquote> <h4 id="_4-4-1-右侧箭头按钮代码实现"><a href="#_4-4-1-右侧箭头按钮代码实现" class="header-anchor">#</a> 4.4.1 右侧箭头按钮代码实现</h4> <ol><li><p>结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>a</span> <span class="token attr-name">href</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>#<span class="token punctuation">&quot;</span></span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>next<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token entity named-entity" title="&gt;">&amp;gt;</span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>a</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>并集选择器</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.tb-slider .prev,
.tb-slider .next</span> <span class="token punctuation">{</span>
  ...<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>位置</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.tb-slider .prev</span> <span class="token punctuation">{</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.tb-slider .next</span> <span class="token punctuation">{</span>
  <span class="token property">right</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>细节</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">border-radius</span><span class="token punctuation">:</span> 15px 0 0 15px<span class="token punctuation">;</span>
</code></pre></div></li></ol> <div class="custom-block warning"><p class="custom-block-title">WARNING</p> <ul><li>如果设置了绝对定位的 <code>left</code> 和 <code>right</code> 属性，只有 <code>left</code> 属性生效，因此需要分开设置。</li> <li>同理，如果设置了绝对定位的 <code>top</code> 和 <code>bottom</code> 属性，只有 <code>top</code> 属性生效。</li></ul></div> <h3 id="_4-5-淘宝焦点图-ul-盒子模块制作"><a href="#_4-5-淘宝焦点图-ul-盒子模块制作" class="header-anchor">#</a> 4.5 淘宝焦点图-ul 盒子模块制作</h3> <blockquote><p>第 5 节课 / 3'32''</p></blockquote> <h4 id="_4-5-1-ul-盒子结构信息"><a href="#_4-5-1-ul-盒子结构信息" class="header-anchor">#</a> 4.5.1 ul 盒子结构信息</h4> <ol><li>结构：<code>ul.indicator</code>；</li> <li>宽高：<code>70px * 13px</code>；</li> <li>位置：绝对定位 / 水平居中 / 距离底部 <code>15px</code>；</li> <li>显示属性：
<ol><li>背景色：<code>rgba(255, 255, 255, 0.3)</code></li> <li>圆角矩形</li></ol></li></ol> <h4 id="_4-5-2-ul-盒子代码实现"><a href="#_4-5-2-ul-盒子代码实现" class="header-anchor">#</a> 4.5.2 ul 盒子代码实现</h4> <ol><li><p>结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>ul</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>indicator<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>ul</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>大小和位置</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
<span class="token property">bottom</span><span class="token punctuation">:</span> 15px<span class="token punctuation">;</span>
<span class="token property">left</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
<span class="token property">margin-left</span><span class="token punctuation">:</span> -35px<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 70px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 13px<span class="token punctuation">;</span>
</code></pre></div></li> <li><p>显示属性</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">background-color</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 255<span class="token punctuation">,</span> 0.3<span class="token punctuation">)</span><span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 7px<span class="token punctuation">;</span>
</code></pre></div></li></ol> <h3 id="_4-6-淘宝焦点图-li-小圆点模块制作"><a href="#_4-6-淘宝焦点图-li-小圆点模块制作" class="header-anchor">#</a> 4.6 淘宝焦点图-li 小圆点模块制作</h3> <blockquote><p>第 5 节课 / 4'04''</p></blockquote> <h4 id="_4-6-1-li-小圆点结构信息"><a href="#_4-6-1-li-小圆点结构信息" class="header-anchor">#</a> 4.6.1 li 小圆点结构信息</h4> <ol><li>结构：<code>li*5</code>；</li> <li>宽高：<code>8px * 8px</code>；</li> <li>位置：左浮动 / <code>margin 3px;</code></li> <li>显示属性：
<ol><li>背景色：<code>#fff</code> / <code>#ff5000</code></li> <li>圆角矩形</li></ol></li></ol> <h4 id="_4-6-2-li-小圆点代码实现"><a href="#_4-6-2-li-小圆点代码实现" class="header-anchor">#</a> 4.6.2 li 小圆点代码实现</h4> <ol><li><p>结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>active<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>li</span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>li</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p>大小和位置</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">float</span><span class="token punctuation">:</span> left<span class="token punctuation">;</span>
<span class="token property">width</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>
<span class="token property">height</span><span class="token punctuation">:</span> 8px<span class="token punctuation">;</span>
<span class="token property">margin</span><span class="token punctuation">:</span> 3px<span class="token punctuation">;</span>
<span class="token property">list-style</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
</code></pre></div></li> <li><p>显示属性</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token property">background-color</span><span class="token punctuation">:</span> #fff<span class="token punctuation">;</span>
<span class="token property">border-radius</span><span class="token punctuation">:</span> 50%<span class="token punctuation">;</span>
</code></pre></div></li> <li><p>激活状态小圆点的显示属性</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.tb-slider .indicator .active</span> <span class="token punctuation">{</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #ff5000<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li></ol> <h3 id="☆4-7-网页布局总结"><a href="#☆4-7-网页布局总结" class="header-anchor">#</a> ☆4.7 网页布局总结</h3> <blockquote><p>第 5 节课 / 4'21''</p></blockquote> <p>一个完整的网页，是由<strong>标准流</strong>、<strong>浮动</strong>、<strong>定位</strong>一起完成布局的，每个都有自己的专门用法。</p> <ol><li><p>标准流</p> <ul><li><strong>块级元素</strong>上下排列 / <strong>行内元素</strong>或<strong>行内块元素</strong>左右排列；</li> <li>垂直的块级盒子显示就用标准流布局。</li></ul></li> <li><p>浮动</p> <ul><li>让多个块级元素一行显示或者左右对齐盒子；</li> <li>多个块级盒子水平显示就用浮动布局。</li></ul></li> <li><p>定位</p> <ul><li>定位最大的特点是有层叠的概念，就是可以让多个盒子前后叠压来显示；</li> <li>如果元素自由在某个盒子内摆放就用定位布局。</li></ul></li></ol> <h2 id="_5-显示属性"><a href="#_5-显示属性" class="header-anchor">#</a> 5. 显示属性</h2> <h3 id="☆5-1-display-显示隐藏元素"><a href="#☆5-1-display-显示隐藏元素" class="header-anchor">#</a> ☆5.1 display 显示隐藏元素</h3> <blockquote><p>第 5 节课 / 6'41''</p></blockquote> <h4 id="_5-1-1-「display-显示隐藏元素」问题"><a href="#_5-1-1-「display-显示隐藏元素」问题" class="header-anchor">#</a> 5.1.1 「display 显示隐藏元素」问题</h4> <ul><li>问题 1：<code>display</code> 属性的作用是什么？有哪两个常用设置项？</li> <li>问题 2：<code>display：none</code> 有什么特点？</li></ul> <h4 id="_5-1-2-「display-显示隐藏元素」答案"><a href="#_5-1-2-「display-显示隐藏元素」答案" class="header-anchor">#</a> 5.1.2 「display 显示隐藏元素」答案</h4> <ul><li><p>问题 1：<code>display</code> 属性的作用是什么？有哪两个常用设置项？</p> <ul><li><code>display</code> 属性可以设置或检索对象是否及如何显示。
<ul><li><code>display: none;</code> 隐藏对象</li> <li><code>display：block</code> 除了转换为块级元素之外，同时还有显示元素的意思。</li></ul></li></ul></li> <li><p>问题 2：<code>display：none</code> 有什么特点？</p> <ul><li><code>display</code> 隐藏元素后，<strong>不再占</strong>有原来的位置；</li></ul></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><code>display: none;</code> 和 <code>display：block</code> 后面应用及其广泛，搭配 JavaScript 可以做很多的网页特效。</p></div> <h3 id="_5-2-visibility-显示隐藏元素"><a href="#_5-2-visibility-显示隐藏元素" class="header-anchor">#</a> 5.2 visibility 显示隐藏元素</h3> <blockquote><p>第 5 节课 / 2'32''</p></blockquote> <h4 id="_5-2-1-「visibility-显示隐藏元素」问题"><a href="#_5-2-1-「visibility-显示隐藏元素」问题" class="header-anchor">#</a> 5.2.1 「visibility 显示隐藏元素」问题</h4> <ul><li>问题 1：<code>visibility</code> 属性的作用是什么？有哪两个常用设置项？</li> <li>问题 2：<code>visibility: hidden</code> 和 <code>display：none</code> 有什么区别？</li></ul> <h4 id="_5-2-2-「visibility-显示隐藏元素」答案"><a href="#_5-2-2-「visibility-显示隐藏元素」答案" class="header-anchor">#</a> 5.2.2 「visibility 显示隐藏元素」答案</h4> <ul><li><p>问题 1：<code>visibility</code> 属性的作用是什么？有哪两个常用设置项？</p> <ul><li><code>visibility</code> 属性用于指定一个元素应可见还是隐藏；
<ul><li><code>visible</code> 元素可见；</li> <li><code>hidden</code> 元素隐藏。</li></ul></li></ul></li> <li><p>问题 2：<code>visibility: hidden</code> 和 <code>display：none</code> 有什么区别？</p> <ul><li><code>visibility: hidden</code> 会隐藏元素，但是空间会保留；</li> <li><code>display：none</code> 会隐藏元素，同时空间也不会保留（<strong>重点</strong>）；</li></ul></li></ul> <h3 id="☆5-3-overflow-溢出显示隐藏"><a href="#☆5-3-overflow-溢出显示隐藏" class="header-anchor">#</a> ☆5.3 overflow 溢出显示隐藏</h3> <blockquote><p>第 5 节课 / 8'18''</p></blockquote> <h4 id="_5-3-1-「overflow-溢出显示隐藏」问题"><a href="#_5-3-1-「overflow-溢出显示隐藏」问题" class="header-anchor">#</a> 5.3.1 「overflow 溢出显示隐藏」问题</h4> <ul><li>问题 1：<code>overflow</code> 属性的作用是什么？有几个设置项？</li> <li>问题 2：大多情况下，我们希望显示溢出的内容吗？为什么？有没有例外？</li></ul> <h4 id="_5-3-2-「overflow-溢出显示隐藏」答案"><a href="#_5-3-2-「overflow-溢出显示隐藏」答案" class="header-anchor">#</a> 5.3.2 「overflow 溢出显示隐藏」答案</h4> <ul><li><p>问题 1：<code>overflow</code> 属性的作用是什么？有几个设置项？</p> <ul><li><p><code>overflow</code> 属性指定了如果内容溢出一个元素的框（超过其指定高度及宽度）的处理方式，包括：</p> <table><thead><tr><th>属性值</th> <th>描述</th></tr></thead> <tbody><tr><td>visible</td> <td>不剪切内容也不添加滚动条</td></tr> <tr><td>hidden</td> <td>不显示超过对象尺寸的内容，超出的部分隐藏掉</td></tr> <tr><td>scroll</td> <td>不管超出内容否，总是显示滚动条</td></tr> <tr><td>auto</td> <td>超出自动显示滚动条，不超出不显示滚动条</td></tr></tbody></table></li></ul></li> <li><p>问题 2：大多情况下，我们希望显示溢出的内容吗？有没有例外？</p> <ul><li>大多情况下，我们不希望让溢出的内容显示出来，因为会影响布局；</li> <li>例外：如果有定位的盒子超出了边界，则不能使用 <code>overflow:hidden</code>。</li></ul></li></ul> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>在 Windows 下 <code>scroll</code> 和 <code>auto</code> 有区别，但是在 macOS 下，都会按照 <code>auto</code> 显示。</p></div> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>除了 visible，浏览器在渲染其他三个属性的元素时，都需要先计算出盒子的准确大小和边界。</p> <p>而一旦有了准确的大小和边界，<strong>外边距合并</strong>、<strong>盒子塌陷</strong>、<strong>清除浮动</strong>等问题也就随之解决了。</p></div> <h3 id="_5-4-土豆案例"><a href="#_5-4-土豆案例" class="header-anchor">#</a> 5.4 土豆案例</h3> <blockquote><p>第 6 节课 / 7'57'' + 3'44''</p></blockquote> <h4 id="_5-4-1-土豆案例目标"><a href="#_5-4-1-土豆案例目标" class="header-anchor">#</a> 5.4.1 土豆案例目标</h4> <ol><li>练习元素的显示与隐藏</li> <li>练习元素的定位</li> <li>复习背景图片的使用</li></ol> <h4 id="_5-4-2-土豆案例实现的核心原理"><a href="#_5-4-2-土豆案例实现的核心原理" class="header-anchor">#</a> 5.4.2 土豆案例实现的核心原理</h4> <ol><li>默认不显示半透明的黑色遮罩；</li> <li>鼠标经过大盒子，就显示半透明遮罩；</li></ol> <div class="custom-block tip"><p class="custom-block-title">TIP</p> <p>遮罩的盒子不占有位置，需要<strong>绝对定位</strong>和 <code>display</code> 配合使用。</p></div> <h5 id="土豆案例图片素材"><a href="#土豆案例图片素材" class="header-anchor">#</a> 土豆案例图片素材</h5> <p><img src="/basenode/assets/img/tudou.70bc1cf9.jpg" alt="土豆图片"> <img src="" alt="遮罩图片"></p> <h4 id="_5-4-3-土豆案例结构分析"><a href="#_5-4-3-土豆案例结构分析" class="header-anchor">#</a> 5.4.3 土豆案例结构分析</h4> <ol><li>结构：<code>.tudou&gt;.mask+img</code>；</li> <li>大小：<code>440px * 320px</code>；</li> <li>定位：子(<code>.mask</code>)绝父(<code>.tudou</code>)相；</li> <li>遮罩背景图片 <code>arr.png</code> 居中显示 / 背景色 <code>rgba(0, 0, 0, .4)</code>。</li></ol> <h4 id="_5-4-4-土豆案例代码实现"><a href="#_5-4-4-土豆案例代码实现" class="header-anchor">#</a> 5.4.4 土豆案例代码实现</h4> <ol><li><p>结构</p> <div class="language-html extra-class"><pre class="language-html"><code><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>tudou<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>div</span> <span class="token attr-name">class</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>mask<span class="token punctuation">&quot;</span></span><span class="token punctuation">&gt;</span></span><span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
  <span class="token tag"><span class="token tag"><span class="token punctuation">&lt;</span>img</span> <span class="token attr-name">src</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>./images/tudou.jpg<span class="token punctuation">&quot;</span></span> <span class="token attr-name">alt</span><span class="token attr-value"><span class="token punctuation attr-equals">=</span><span class="token punctuation">&quot;</span>视频图片<span class="token punctuation">&quot;</span></span> <span class="token punctuation">/&gt;</span></span>
<span class="token tag"><span class="token tag"><span class="token punctuation">&lt;/</span>div</span><span class="token punctuation">&gt;</span></span>
</code></pre></div></li> <li><p><code>.tudou</code> 布局 + 图像显示</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.tudou</span> <span class="token punctuation">{</span>
  <span class="token property">position</span><span class="token punctuation">:</span> relative<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 444px<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 320px<span class="token punctuation">;</span>
  <span class="token property">background-color</span><span class="token punctuation">:</span> #ccc<span class="token punctuation">;</span>
  <span class="token property">margin</span><span class="token punctuation">:</span> 30px auto<span class="token punctuation">;</span>
<span class="token punctuation">}</span>

<span class="token selector">.tudou img</span> <span class="token punctuation">{</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>遮罩 <code>.mask</code> 盒子</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.mask</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> none<span class="token punctuation">;</span>
  <span class="token property">position</span><span class="token punctuation">:</span> absolute<span class="token punctuation">;</span>
  <span class="token property">top</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">left</span><span class="token punctuation">:</span> 0<span class="token punctuation">;</span>
  <span class="token property">width</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">height</span><span class="token punctuation">:</span> 100%<span class="token punctuation">;</span>
  <span class="token property">background</span><span class="token punctuation">:</span> <span class="token function">rgba</span><span class="token punctuation">(</span>0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0<span class="token punctuation">,</span> 0.4<span class="token punctuation">)</span> <span class="token url"><span class="token function">url</span><span class="token punctuation">(</span>images/arr.png<span class="token punctuation">)</span></span> no-repeat center<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div></li> <li><p>鼠标经过</p> <div class="language-css extra-class"><pre class="language-css"><code><span class="token selector">.tudou:hover .mask</span> <span class="token punctuation">{</span>
  <span class="token property">display</span><span class="token punctuation">:</span> block<span class="token punctuation">;</span>
<span class="token punctuation">}</span>
</code></pre></div><div class="custom-block tip"><p class="custom-block-title">TIP</p> <p><code>:hover</code> 是状态</p> <p><code>.tudou</code> 发生 <code>:hover</code> 状态时，选择其后代 <code>.mask</code> 并设置样式。</p></div></li></ol></div> <footer class="page-edit"><!----> <!----></footer> <div class="page-nav"><p class="inner"><span class="prev">
      ←
      <a href="/basenode/css/day05.html" class="prev">
        CSS 第 05 天 —— 学成在线
      </a></span> <span class="next"><a href="/basenode/css/day07.html">
        CSS 第 07 天 —— 高级技巧
      </a>
      →
    </span></p></div> </main></div><div class="global-ui"><!----></div></div>
    <script src="/basenode/assets/js/app.52c57e5d.js" defer></script><script src="/basenode/assets/js/2.fd1002bd.js" defer></script><script src="/basenode/assets/js/3.924754cc.js" defer></script>
  </body>
</html>
